<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Magi</title>
<style type="text/css">
body {
  margin:0px;
  padding:0px;
  font-size: 14px;
}
table {
  border-collapse: collapse;
  border: none;
  font-family: Arial, Helvetica, sans-serif;
}
h1, h2, ul, dl {
  padding:0px;
  margin:0px;
  list-style:none
}
ul li, dl dt {
  line-height:26px;
}
ul, dl {
  margin:4px 0px;
  width:750px;
}
p.em2 {
  text-indent:2em
}
#contenter {
  padding:10px;
}
h1 {
  margin:15px 0px;
}
h2 {
  margin:12px 0px;
}
div.code, table.doc {
  width: 750px;
}
table.doc {
  border:0px;
  margin:16px 0px;
}
div.code {
  padding: 10px;
  margin:10px 0px;
  line-height: 24px;
  background: #eee;
  border: 1px solid #aaa;
  width:730px;
  font-family:Arial, Helvetica, sans-serifl;
}
table.doc td, table.doc th {
  padding: 6px 6px;
  border:1px solid #aaa;
}
span.desc {
  color:#CCC
}
table.doc th {
  background: #bbb;
  font-size: 14px;
}
table.doc td {
  font-size: 12px;
  background: #eee;
}
</style>
</head>
<body>
<div id="contenter">
  <h1>Magi alpha 0.3.2 手机应用框架接口文档</h1>
  <h2>作者</h2>
  <ul>
    <li>Name: Weiqi.Zeng </li>
    <li>Contact: zeng444@163.com</li>
  </ul>
  <h2>版本更新说明 </h2>
  <ul>
  <li>magi alpha 0.3.2 2013-07-03 增加魔术方法_this_class和_this_method 增加启动参数default_controller_filter,为控制器设定过滤器</li>
    <li>magi alpha 0.3.1 2013-06-20 回跳地址函数magi.route.back和magi.route.history增加参数，当没有历史记录时，按照新增参数给的地址做跳转</li>
    <li>magi alpha 0.3.0 2013-05-10 增加浏览器后退功能安卓4.1有效，IOS只测试了6.0和6.1，修正mag.route.back()、mag.route.history()连续后退。</li>
   <li>magi alpha 0.2.9 2013-05-10 增加了flip的翻转转场动画</li>
    <li>magi alpha 0.2.8 2013-05-8 启动参数添加is_mvc属性，可以让框架按照简单的静态页展示，而不走MVC结构</li>
  <li>magi alpha 0.2.7 2013-05-3 _get获取中文转义，模版标签a和em增加了返回标签data-magi-route-back</li>
   <li>magi alpha 0.2.6 2013-04-28 em按钮绑定增加data-magi-effect、data-magi-route-url 绑定路由地址和特效，地址栏切换功能增强</li>
  <li>magi alpha 0.2.5 2013-04-11 修改一系列BUG，debug功能添加记录日志功能</li>
   <li>magi alpha 0.2.4 2013-04-9  添加兼容的旋转屏幕事件</li>
    <li>magi alpha 0.2.3 2013-04-9 添加flyin效果 优化的标签编译A</li>
   <li>magi alpha 0.2.2 2013-03-25  修改swipeleft、swiperight属性，重写，添加IE10的支持</li>
  <li>magi alpha 0.2.1 2013-03-25  修改spread属性，添加flyin特效</li>
  <li>magi alpha 0.2.0 2013-03-25  重写了加载场景切换动画，流畅性提升，添加编译标签em按钮的data-magi-touch-style属性</li>
   <li>magi alpha 0.1.9 2013-03-25  修正query传参“.”阻断获取值的BUG。</li>
  <li>magi alpha 0.1.8 2013-03-25  启动参数is_use_tpl_cache，模板不再依赖AJAX，便于phonegap封包使用</li>
     <li>magi alpha 0.1.7 2013-03-24  ajax弹窗提示框，增加历史回跳地址函数magi.route.back和magi.route.history</li>
    <li>Magi alpha 0.1.6 2013-03-15 优化loading的出现方式添加参数控制，添加file.load方法，预载资源</li>
   <li>Magi alpha 0.1.5 2013-03-09  增强VIEW层，增加标签功能，增加DEBUG方法，增加一些全局参数</li>
   <li>Magi alpha 0.1.4 2013-03-08  增加响应swipeleft和swiperight的触屏事件，增加控制器魔术方法_this和_this_name</li>
    <li>Magi alpha 0.1.3 2013-03-07  添加url风格转场函数route.to.url，添加了spread转场动画，优化其他几种转场动画性能</li>
     <li>Magi alpha 0.1.2 2013-03-06  实现了5种转场效果none,opacity,swipeleft,swiperight,spread，并提供添加和重写的接口</li>
  <li>Magi alpha 0.1.1 2013-03-04  修改了VIEW文件格式，直接使用HTML模板，并增加CACHE方法</li>

    <li>Magi alpha 0.1.0 2013-03-04   框架基本结构完成</li>
  </ul>
  <h2>一、特性</h2>
  <ul>
    <li>1：基于JAVASCRIPT、HTML5、CSS3环境，不依赖第三方JS库的轻量级框架。</li>
   <li>2：SPA（single-page application），实现不同页面异步平滑载入，方便phonegap封包Native app。</li>
    <li>3：MVC模式，灵活的配置文件，结构清晰，易于管理。</li>
    <li>4：按需加载控制器、模型和模板文件，Lasyload且同文件只加载一次，方便复杂项目的部署。</li>
    <li>5：易用的接口命令和参数，控制器虚拟化http _GET参数。 </li>
    <li>6：内建常用异步数据读取方法，支持标准AJAX、跨域JSONP。</li>
     <li>7：内建常用页面转场动画，并提供添加和重写转场效果的接口。</li>
    <li>8：内建数据缓存功能，远程数据加载对象增加缓存开关，可设定周期，减少服务器端请求。</li>
  </ul>
  <h2>二、配置文档</h2>
  <ul>
    <li>1：部署一个WEBAPP，需要包含两个Magi的核心文件core.js、magi.min.js，之后初始化APP。</script></li>
  </ul>
  <div class="code"> &lt;script type=&quot;text/javascript&quot; src=&quot;magi/core/core.js&quot;&gt;&lt;/script&gt;<br>
    &lt;script type=&quot;text/javascript&quot; src=&quot;magi/core/magi.min.js&quot;&gt;&lt;/script&gt;<br />
    &lt;script type=&quot;text/javascript&quot;&gt;<br>
    magi.startup( { <br>
    &nbsp;&nbsp;&nbsp;&nbsp;default_controller:'index',<br>
    &nbsp;&nbsp;&nbsp;&nbsp;default_action:'index',<br>
    });<br />
    &lt;/script&gt;<br>
  </div>
  <table class="doc">
    <tr>
      <th colspan="3">启动参数说明</th>
    </tr>
      <tr>
      <td width="221">is_mvc</td>
      <td width="99">string</td>
      <td>是否框架启动MVC模式，将模型、控制器、视图分离，默认为true</td>
    </tr>
    <tr>
      <td width="221">controller_path</td>
      <td width="99">string</td>
      <td>控制器路径</td>
    </tr>
    <tr>
      <td>module_path</td>
      <td>string</td>
      <td>模型层路径</td>
    </tr>
    <tr>
      <td>view_path</td>
      <td>string</td>
      <td>视图路径</td>
    </tr>
  <tr>
      <td>tpl_rule</td>
      <td>string</td>
      <td>定义模板格式{$class} {$method}标签对应对象和方法下的模板</td>
    </tr> 
    <tr>
      <td>default_controller</td>
      <td>string</td>
      <td>加载页面完成后默认执行的控制器</td>
    </tr>
    
    <tr>
      <td>default_action</td>
      <td>string</td>
      <td>加载页面完成后默认执行的控制器方法</td>
    </tr>
    <tr>
      <td>playground_name</td>
      <td>string</td>
      <td>创建页面场景的ID name，默认为contenter</td>
    </tr>
    
    
     
     <tr>
      <td> is_use_tpl_cache</td>
      <td>json</td>
      <td>是否加载静态模板cache，使用请先生成，生效后不再依赖ajax加载模板</td>
    </tr>
    
    <tr>
      <td>extend_utility </td>
      <td>json</td>
      <td>加载额外的JS对象依赖文件</td>
    </tr>
    <tr>
      <td>default_page_effection</td>
      <td>string</td>
      <td>页面转场特效<br />
        选项：（默认none）<br />
        none 无过度<br />
        spread 展开<br />
    flyin 轻微展开并滑入<br />
        flyout 轻微划出并逃逸<br />
        opacity 渐显<br />
        swipeleft 左划出<br />
        swiperight 右划出<br />
    flip 3D旋转</td>
    </tr>
    <tr>
      <td>ajax_tip_class</td>
      <td>string</td>
      <td>异步处理数据显示的提条示样式，默认为：_ajax_loading，填写none不启用 </td>
    </tr>
    <tr>
      <td>default_query</td>
      <td>json</td>
      <td>默认启动的HTTP GET参数</td>
    </tr>
    <tr>
      <td>allow_browser_url_change</td>
      <td>booleen</td>
      <td>是否开启地址栏随场景改变，当开启将放弃转场动画）</td>
    </tr>
     <tr>
      <td>is_header_footer_transition_fixed</td>
      <td>booleen默认true</td>
      <td>当haeder和footer标签固定时转场动画是否跟随</td>
    </tr>
	 <tr>
      <td> default_controller_construct</td>
      <td>function object</td>
      <td>为控制器设定一个过滤器，在控制器_construct前执行</td>
    </tr>
  </table>
 
 
  
  <h2>三、MVC-Controller</h2>
  <h3>3.1 创建一个控制器</h3>
  <ul>
    <li>控制器对象名同JS文件名，如index控制器对应index.js，控制器中的每个方法对应了一个URL的场景。</li>
  </ul>
  <div class="code">
    <p>var index=(function($){<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="desc">//private function write here</span><br />
      &nbsp;&nbsp;&nbsp;&nbsp;function response(){<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('hello world');<br />
      &nbsp;&nbsp;&nbsp;&nbsp;}<br />
      &nbsp;&nbsp;&nbsp;&nbsp;return {<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;model:['artilce'],<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;except_auto_render:{index:true},<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="desc">//public function write here</span><br />
   
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__construct:function(_get){<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="desc">//something execute before all</span><br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_this.innerHTML = '页面场景正文'<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__destruct:function(_get){<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="desc">//something execute before all</span><br />
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_this.innerHTML = '页面场景正文'<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index:function(_get){<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="desc">//index method</span><br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
    <p> }</p>
    <p>})($);</p>
  </div>
  <table class="doc">
    <tr>
      <th colspan="3">控制器对象中的契约方法和属性</th>
    </tr>
    <tr>
      <td width="106">__construct(_get)</td>
      <td width="72">function</td>
      <td width="456">构造函数，在控制器方法执行前被触发，可用于数据预处理，访问权限验证等，默认参数_GET可以获取当前传递的get query数组</td>
    </tr>
      <tr>
      <td width="106">__destruct(_get)</td>
      <td width="72">function</td>
      <td width="456">构造函数，在控制器方法执行完毕后触发，默认参数_GET可以获取当前传递的get query数组</td>
    </tr>
   
    <tr>
      <td>except_auto_render</td>
      <td>json</td>
      <td>设定不自动加载模板的方法列表</td>
    </tr>
    <tr>
      <td>method(_get)</td>
      <td>json</td>
      <td>定义一般方法，默认参数_GET可以获取当前传递的get query数组</td>
    </tr>
  </table>
  <h3>3.2 访问一个控制器</h3>
  <ul>
    <li>方法1：通过magi.route.to(controller,method,queryJson,effect)或magi.route.url(url,effect)方法访问</li>
    <li>方法2：通过URL方式访问，带路由http://{url}/?job=index#index<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;模板标签的模式，&lt;a &nbsp;href=&quot;index#index?id=5&quot;&nbsp;data-magi-route=&quot;true&quot;&gt;连接&lt;/a&gt;<br />
    </li>
  </ul>
  <ul>
    <li>Example 访问index控制器下的index方法，并传递ID为5的GET参数</li>
  </ul>
  <div class="code"> <span class="desc">//直接URL方式</span><br />
  
    location.href="http://127.0.0.1/?job=index#index&id=5";<br />
       <span class="desc">//标签方式</span></br />
      &lt;a &nbsp;href=&quot;index#index?id=5&quot;&nbsp;data-magi-route=&quot;true&quot;&gt;连接&lt;/a&gt;<br />
    <span class="desc">//调用方法方式</span></br />
    magi.route.to(&nbsp;&nbsp;"index"&nbsp;&nbsp;,&nbsp;&nbsp;"index"&nbsp;&nbsp;,&nbsp;&nbsp;{&nbsp;id:5&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;); </br />
   <span class="desc">//别名调用方法方式</span></br />
     magi.route.url(&nbsp;&nbsp;"index#index?id=5"&nbsp;&nbsp;);  <br />
  </div>
  <h2>四、MVC-Model</h2>
  <ul>
    <li>对象结构类似控制器，为控制器提供数据处理、方法封装的工作，调用方式 class.method()</li>
  </ul>
  <div class="code">
    <p>var article=(function($){<br>
    <p> &nbsp;&nbsp;&nbsp;&nbsp;<span class="desc">//private function write here</span><br />
      &nbsp;&nbsp;&nbsp;&nbsp;function data(){<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;}<br />
      &nbsp;&nbsp;&nbsp;&nbsp;return {<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="desc">//public function write here</span><br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index:function(){<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="desc">//index method</span><br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
    </p>
    <p> }</p>
    <p>})($);</p>
  </div>
  
  <h2>五、MVC-view</h2>
   <h3>5.1 默认模板规则</h3>
   <ul>
    <li>和控制器方法一一对应，默认的对应规则如控制器index.index和模板目录中index.index.html文件对应，如果改变对应规则，可用过修改首页启动实例中参数tpl_rule。 </li>
     <li>控制器加载前自动将对应模板loading到场景中，如要禁止加载模板可设置控制器except_auto_render变量，所有模板只载入一次，载入后将存放在浏览器内存中。需要注意的是，模板中直接写的JS代码并不会执行。</li>
  </ul> 
  
  <table class="doc">
    <tr>
      <th colspan="3">模板标签语言</th>
    </tr>
    <tr>
      <td width="69">a</td>
      <td width="361">data-magi-route=&quot;true/false&quot;<br />
    data-magi-effect="opacity/none/spread/swipeleft/swiperight"<br />
    data-magi-route-back="true/false"<br />
    </td>
      <td width="304">编译A标签为span(a标签点击IOS上会闪过地址栏，顾做替换)，并绑定一个路由事件</td>
    </tr>
    <tr>
      <td width="69">em</td>
      <td width="361">data-magi-touch-style=&quot;string&quot;<br />
        data-magi-effect=&quot;string&quot;<br />
        data-magi-route-url=&quot;string&quot;      <br />
    data-magi-route-back="true/false"<br /></td>
      <td width="304">编译em标签为一个button，定义他默认按下样式，路由地址和转场动画</td>
    </tr>
      <tr>
      <td width="69">header</td>
      <td width="361">data-magi-fixed=&quot;true/false&quot;</td>
      <td width="304">开关打开时，编译header标签固定不随viewport拖动</td>
    </tr>
   
    <tr>
      <td>footer</td>
      <td>data-magi-fixed=&quot;true/false&quot;</td>
      <td>开关打开时，编译footer标签固定不随viewport拖动</td>
    </tr>
  
  </table>
   <h3>5.2 模板缓存化</h3>
  <ul>
    <li>模板缓存化，模板默认情况程序执行时，异步AJAX载入的，加快速度可以将模板缓存化，使用自带工具：migi/tools/index.php，生成缓存后，首页启动实例中参数is_use_tpl_cache设置为true即可。 </li>
  </ul> 
   <h2>六、添加或重写转场动画</h2>
   <ul>
     <li>转场动画默认提供的none、opacity、swipeleft、swiperight、spread、flyin、flyout，也提供对方法的重写，或者直接新创建一个转场效果。<br />
     Example： <br />

     <div class="code">
     <span class="desc">//建立一个新转场效果 my_effect</span><br />
     magi.effect.my_effect=function(_append_name,_absolute_page_obj,_mask_obj,_ground_obj){<br />
      <span class="desc">&nbsp;&nbsp;&nbsp;&nbsp;//your code write here</span><br />
     }<br />
     <span class="desc">//调用此效果</span><br />
     magi.route.to(&nbsp;&nbsp;'index'&nbsp;&nbsp;,&nbsp;&nbsp;'index'&nbsp;&nbsp;,&nbsp;&nbsp;'my_effect'&nbsp;&nbsp;);<br />
     <span class="desc">//重写opacity的转场效果 </span><br />
     magi.effect.opacity&nbsp;&nbsp;=&nbsp;&nbsp;function(_append_name,_absolute_page_obj,_mask_obj,_ground_obj){<br />
      <span class="desc">&nbsp;&nbsp;&nbsp;&nbsp;//your code write here</span><br />
     }<br />
     </div>
  
   </li></ul>
   
   <h2>七、CACHE</h2>
   <h3>7.1 远程数据CACHE模块</h3>
   <ul>
     <li>magi.remote.load(url,json,callback,expires)，一个异步请求URL加载JSON数据的方法，其中expires可以设置毫秒数，在expires时间内，此请求的结果保存到本地cache中，下次将直接在本地缓存取数据，需要注意的是不设置expires，或者设置为0时，将不开启缓存功能。<br />
   远程数据加载的另外三个方法magi.remote.get、magi.remote.post、magi.remote.getJson同样支持expires设定，详情参考<a href="#api">API说明</a><br />
   Example：
   </li></ul>
   <div class="code">var news_api_url = 'http://{url}/?class=news&amp;method=article_lists';<br>
var expires = 36000;<br>
magi.remote.load(news_api_url,{p:1},function(json){ <br>
&nbsp;&nbsp;&nbsp;<span class="desc">//操作远程数据json</span><br>
},expires);<br>
magi.remote.cache_clear(news_api_url,{p:1}) <span class="desc">//清除本地缓存</span><br></div>
   <h3>7.2 手动CACHE功能</h3>
      <ul>
     <li>利用magi.cache.get(key),magi.cache.set(key,value,expires),magi.cache.remove(key)可将需要缓存的数据，存取到浏览器中，expires为有效期设定，在有效期后数据将失效，如设定expires为空或为0，此缓存结果将永久有效，除非用户清除浏览器缓存。单个文件存取大小视浏览器约2M左右。<br />
  为方便快速调用增加了magi.cache.value(key,value,expire)方法，当只填写key时此方法同magi.cache.get，否则同magi.cache.set，详情参考<a href="#api">API说明</a>
   </li>
      </ul>
   <div class="code">
   var key = 'test';<br />
   var val = magi.cache.get(key);<br />
   if( !val ){<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;magi.cache.set(key,Math.random(),60000) <span class="desc">//缓存60秒</span><br />
   }<br />
   alert(val);<br />
   </div> 
   <h2>八、系统结构</h2>
  <p>
    ├─index.html &nbsp;&nbsp;&nbsp;&nbsp;<span class="desc">//单点入口</span><br>
    ├─css &nbsp;&nbsp;&nbsp;&nbsp;<span class="desc">//样式表文件</span><br>
    └─magi<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├─controller&nbsp;&nbsp;&nbsp;&nbsp; <span class="desc">//控制器</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├─model <span class="desc">&nbsp;&nbsp;&nbsp;&nbsp;//模型层</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├─core <span class="desc">&nbsp;&nbsp;&nbsp;&nbsp; //Magi系统文件</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;│&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└─util&nbsp;&nbsp;&nbsp;&nbsp; <span class="desc">//用户扩展功能包</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└─themes&nbsp;&nbsp;&nbsp;&nbsp;<span class="desc">//视图</span></p>
  <h2>九、API：</h2>
  <table class="doc">
    <tr>
      <th colspan="6">CORE 常用API说明</th>
    </tr>
    <tr>
      <td colspan="3" align="center">DOM对象控制</td>
    </tr>
    <tr>
      <td width="279">$(query,dom,is_sigle)</td>
      <td width="81">&nbsp;</td>
      <td >CSS 风格DOM选择器</td>
    </tr>
     <tr>
      <td>$.dom.getNextSibling(startBrother)</td>
      <td>&nbsp;</td>
      <td>DOM获取上一个节点</td>
    </tr>
    <tr>
      <td>$.dom.getNextSibling(getPreviousSibling)</td>
      <td>&nbsp;</td>
      <td>DOM获取下一个节点</td>
    </tr>
     <tr>
      <td>$.dom.insertBefore:function(newdiv,parentnode)</td>
      <td>&nbsp;</td>
      <td>在一个节点前插入新元素</td>
    </tr>
    <tr>
    <tr>
      <td colspan="3" align="center">事件绑定</td>
    </tr>
    <tr>
      <td>$.addEvent(obj,method,fun)</td>
      <td>&nbsp;</td>
      <td>事件绑定工具</td>
    </tr>
    <tr>
      <td>$.removeEvent(obj,method,fun)</td>
      <td>&nbsp;</td>
      <td>获取当前场景名</td>
    </tr>
     <tr>
      <td colspan="3" align="center">字符串处理</td>
    </tr>
    <tr>
      <td>$.trim(string)</td>
      <td>&nbsp;</td>
      <td>删除字符开头和结尾的空格</td>
    </tr>
     <tr>
      <td>$.length(string)</td>
      <td>&nbsp;</td>
      <td>获取字符串字节长度（判断双字节字符）</td>
    </tr>
    
    <tr>
      <td>$.json.string(josn)</td>
      <td>&nbsp;</td>
      <td>转换JSON为字符串</td>
    </tr>
    
    <tr>
      <td>$.json.object(string)</td>
      <td>&nbsp;</td>
      <td>转换字符串为json</td>
    </tr>
     <tr>
      <td colspan="3" align="center">输入输出</td>
    </tr>
    <tr>
      <td>$.msg(msg)</td>
      <td>&nbsp;</td>
      <td>输出工具</td>
    </tr>
     <tr>
      <td colspan="3" align="center">兼容性判断</td>
    </tr>
    <tr>
      <td>$.navigator.is_ie()</td>
      <td>&nbsp;</td>
      <td>检查是否为IE</td>
    </tr>
    <tr>
      <td>$.navigator.is_ie6()</td>
      <td>&nbsp;</td>
      <td>检查是否为IE6</td>
    </tr>
    <tr>
      <td>$.navigator.is_ie7()</td>
      <td>&nbsp;</td>
      <td>检查是否为IE7</td>
    </tr>
    <tr>
      <td>$.navigator.is_ie8()</td>
      <td>&nbsp;</td>
      <td>检查是否为IE8</td>
    </tr>
      <tr>
      <td>$.navigator.is_ie9()</td>
      <td>&nbsp;</td>
      <td>检查是否为IE9</td>
    </tr>
    <tr>
      <td>$.navigator.is_ie10()</td>
      <td>&nbsp;</td>
      <td>检查是否为IE10</td>
    </tr>
  
     <tr>
      <td>$.navigator.is_ios()</td>
      <td>&nbsp;</td>
      <td>是否为IOS操作系统</td>
    </tr>
    <tr>
      <td colspan="3" align="center">AJAX异步加载</td>
    </tr>
    <tr>
      <td>$.ajax.get(url,json,callback,errback)</td>
      <td>&nbsp;</td>
      <td>AJAX get 方式载入一个远程数据文件</td>
    </tr>
    <tr>
      <td>$.ajax.post(url,json,callback,errback)</td>
      <td>&nbsp;</td>
      <td>AJAX post的方式载入一个远程文件</td>
    </tr>
    <tr>
      <td>$.ajax.getJson(url,json,callback,errback)</td>
      <td>&nbsp;</td>
      <td>AJAX post的方式载入一个JSON格式的远程文件</td>
    </tr>
    <tr>
      <td>$.ajax.jsonp(url,json,callback,server)</td>
      <td>&nbsp;</td>
      <td>AJAX jsonp方式载入一个JSON格式的远程文件</td>
    </tr>
     <tr>
      <td colspan="3" align="center">cookie控制</td>
    </tr>
    <tr>
      <td>$.cookies.opt(key,value,parm)</td>
      <td>&nbsp;</td>
      <td>设置或获取一个COOKIE值</td>
    </tr>
    <tr>
      <td>$.cookies.opt(del)</td>
      <td>&nbsp;</td>
      <td>删除一个COOKIE信息</td>
    </tr>
    <tr>
      <td colspan="3" align="center">动画函数</td>
    </tr>
  <tr>
      <td>$.animate.play(fun,time,callback)</td>
      <td>&nbsp;</td>
      <td>动画过渡方法</td>
    </tr>
  <tr>
      <td>$.transition.play(json,time,callback)</td>
      <td>&nbsp;</td>
      <td>动画过渡方法<br />  $.transition.play($('#a')[0],{<br>
width:['0px','200px'],<br />
},1000,function(){});</td>
    </tr>
  </table>
   <table class="doc">
    <tr>
      <th colspan="3">Magi全局变量</th>
    </tr>
    <tr>
      <td width="221">_GET</td>
      <td width="99">json</td>
      <td>当前URL _GET QUERY数组</td>
    </tr>
    
    <tr>
      <td>_this</td>
      <td>object</td>
      <td>当前view容器对象</td>
    </tr>
    <tr>
      <td>_this_name</td>
      <td>string</td>
      <td>当前view容器对象ID名称</td>
    </tr>
	 <tr>
      <td>_this_class</td>
      <td>string</td>
      <td>当前view容器对象名</td>
    </tr>
	 <tr>
      <td>_this_method</td>
      <td>string</td>
      <td>当前view容器方法名</td>
    </tr>
  </table>
  <table class="doc">
    <tr>
      <th colspan="6">Magi API说明</th>
    </tr>
    <tr>
      <td width="279">magi.ver</td>
      <td width="81">&nbsp;</td>
      <td >获取版本信息</td>
    </tr>
     <tr>
      <td colspan="3" align="center">页面控制</td>
    </tr>
    <tr>
      <td>magi.startup(parmas)</td>
      <td>&nbsp;</td>
      <td>启动一个webapp实例</td>
    </tr>
    <tr>
      <td>magi.route.page_name(_class,_method,_query)</td>
      <td>&nbsp;</td>
      <td>获取当前场景名</td>
    </tr>
     <tr>
      <td>magi.route.to(_class,_method,_query,_effect,_hidden_ajax_tip)</td>
      <td>&nbsp;</td>
      <td>页面场景跳转</td>
    </tr>
    <tr>
      <td>magi.route.url(_url,_effect,url,_hidden_ajax_tip)</td>
      <td>&nbsp;</td>
      <td>URL风格场景跳转</td>
    </tr>
    <tr>
      <td>magi.route.back(_effect,url,_hidden_ajax_tip)</td>
      <td>&nbsp;</td>
      <td>回调上一页</td>
    </tr>
    <tr>
      <td>magi.loading.init();</td>
      <td>&nbsp;</td>
      <td>打开一个正在加载的提示</td>
    </tr>
     <tr>
       <td>magi.loading.close();</td>
      <td>&nbsp;</td>
      <td>关闭一个正在加载的提示</td>
    </tr>
     <tr>
      <td>magi.route.history(_no,_effect,_hidden_ajax_tip)</td>
      <td>&nbsp;</td>
      <td>回调指定历史页</td>
    </tr>
     <tr>
      <td>magi.route.back(_effect,_hidden_ajax_tip)</td>
      <td>&nbsp;</td>
      <td>回调上一页</td>
    </tr>
   <tr>
      <td colspan="3" align="center">模板标签编译</td>
    </tr>
   
  
   <tr>
      <td>magi.render.header()</td>
      <td>&nbsp;</td>
      <td>编译html中的&lt;header&gt;标签</td>
    </tr>
  
  <tr>
      <td>magi.render.footer()</td>
      <td>&nbsp;</td>
      <td>编译html中的&lt;footer&gt;标签</td>
    </tr>
   <tr>
      <td>magi.render.header_and_footer()</td>
      <td>&nbsp;</td>
      <td>编译html中的&lt;header&gt;标签</td>
    </tr>
  <tr>
      <td>magi.render.a(dom)</td>
      <td>&nbsp;</td>
      <td>编译html中的&lt;a&gt;标签</td>
    </tr>
  
   <tr>
      <td>magi.render.all(dom)</td>
      <td>&nbsp;</td>
      <td>编译非&lt;footer&gt;和&lt;header&gt;的所有标签</td>
    </tr>
  
  
    <tr>
      <td colspan="3" align="center">触屏高级事件</td>
    </tr>
   <tr>
      <td>magi.evt.swipeleft(callback)</td>
      <td>&nbsp;</td>
      <td>左滑屏幕</td>
    </tr>
   <tr>
      <td>magi.evt.swiperight(callback)</td>
      <td>&nbsp;</td>
      <td>右滑屏幕</td>
    </tr>
    <tr>
      <td>magi.evt.onorientationchange(callback)</td>
      <td>&nbsp;</td>
      <td>设备旋转时</td>
    </tr>
     <tr>
      <td colspan="3" align="center">供重写的转场对象</td>
    </tr>
     <tr>
      <td><p>magi.effect.none(<br />
        _append_name,<br />
        _absolute_page_obj,<br />
        _mask_obj,<br />
        _ground_obj,<br />
    _construct,<br />
    _callback,<br />
  
  
       )</p>
       </td>
      <td>&nbsp;</td>
      <td>新场景默认出现</td>
    </tr>
     <tr>
      <td>magi.effect.opacity(<br />_append_name,<br />_absolute_page_obj,<br />_mask_obj,<br />
      _ground_obj,<br />
    _construct,<br />
      _callback<br />
      )</td>
      <td>&nbsp;</td>
      <td>新场景渐显</td>
    </tr>
    
     <tr>
      <td>magi.effect.swipeleft(<br />_append_name,<br />_absolute_page_obj,<br />_mask_obj,<br />_ground_obj,<br />_construct,<br />_callback<br />)</td>
      <td>&nbsp;</td>
      <td>新旧场景通过左滑动切换</td>
    </tr>
      <tr>
      <td>magi.effect.swiperight(<br />_append_name,<br />_absolute_page_obj,<br />_mask_obj,<br />_ground_obj,<br />_construct,<br />_callback<br />)</td>
      <td>&nbsp;</td>
      <td>新旧场景通过右滑动切换</td>
    </tr>
   <tr>
      <td>magi.effect.spread(<br />_append_name,<br />_absolute_page_obj,<br />_mask_obj,<br />_ground_obj,<br />_construct,<br />_callback<br />)</td>
      <td>&nbsp;</td>
      <td>新旧场景通过展开方式切换</td>
    </tr>
      <tr>
      <td>magi.effect.flyin(<br />_append_name,<br />_absolute_page_obj,<br />_mask_obj,<br />_ground_obj,<br />_construct,<br />_callback<br />)</td>
      <td>&nbsp;</td>
      <td>新旧场景通过飞入切换</td>
    </tr>
    <tr>
      <td>magi.effect.flyout(<br />_append_name,<br />_absolute_page_obj,<br />_mask_obj,<br />_ground_obj,<br />_construct,<br />_callback<br />        )</td>
      <td>&nbsp;</td>
      <td>新旧场景通过飞出切换</td>
    </tr>
  <tr>
      <td>magi.effect.flip(<br />
        _append_name,<br />_absolute_page_obj,<br />_mask_obj,<br />_ground_obj,<br />_construct,<br />_callback<br />        )</td>
      <td>flip 3D旋转</td>
      <td>新旧场景通过3D翻转切换</td>
    </tr>
       <tr>
      <td colspan="3" align="center">资源预载</td>
    </tr>
     <tr>
      <td>magi.util.file.load(json,callback)</td>
      <td>&nbsp;</td>
      <td>支持异步预载入图片和JS文件，可用在启动页，回调函数call(complete,count)参数分别是已完成数，和总数</td>
    </tr>
     <tr>
      <td colspan="3" align="center">库文件加载</td>
    </tr>
    <tr>
    <tr>
      <td>magi.lasyload.file(src,callback)</td>
      <td>&nbsp;</td>
      <td>异步加载一个库文件</td>
    </tr>
    <tr>
      <td>magi.lasyload.files(src_json,callback)</td>
      <td>&nbsp;</td>
      <td>异步加载一组库文件</td>
    </tr>
  
    <tr>
      <td colspan="3" align="center">数据验证</td>
    </tr>
     <tr>
      <td>magi.validate.is_number(value)</td>
      <td>boolean</td>
      <td>是否为数字</td>
    </tr>
     <tr>
      <td>magi.validate.is_string(value)</td>
      <td>boolean</td>
      <td>是否为字符串</td>
    </tr>
     <tr>
      <td>magi.validate.is_mail(value)</td>
      <td>boolean</td>
      <td>是否为一个邮箱</td>
    </tr>
     <tr>
      <td>magi.validate.is_tel(value)</td>
      <td>boolean</td>
      <td>是否为电话号码</td>
    </tr>
     <tr>
      <td>magi.validate.is_mobile(value)</td>
      <td>boolean</td>
      <td>是否为手机号码</td>
    </tr>
     <tr>
      <td>magi.validate.is_zipcode(value)</td>
      <td>boolean</td>
      <td>是否为邮政编码</td>
    </tr>
     <tr>
      <td>magi.validate.is_zhcn(value)</td>
      <td>boolean</td>
      <td>是否为中文</td>
    </tr>
     <tr>
      <td>magi.validate.is_idcard(value)</td>
      <td>boolean</td>
      <td>是否为身份证</td>
    </tr>
    
   <tr>
      <td colspan="3" align="center">cache控制</td>
    </tr>
     <tr>
      <td>magi.cache.get(key)</td>
      <td>&nbsp;</td>
      <td>获取一个缓存数据</td>
    </tr>

     <tr>
      <td>magi.cache.set(key,value,expires)</td>
      <td>&nbsp;</td>
      <td>设置一个缓存数据</td>
    </tr>

     <tr>
      <td>magi.cache.remove(key)</td>
      <td>&nbsp;</td>
      <td>移除一个缓存数据</td>
    </tr>
    <tr>
      <td>magi.cache.value(key,value,expires)</td>
      <td>&nbsp;</td>
      <td>获取一个缓存数据或设置一个缓存数据</td>
    </tr>
     <tr>
      <td colspan="3" align="center">远程数据获取</td>
    </tr>
    <tr>
      <td><a name="api"></a>magi.remote.load(url,json,callback,expires,server)</td>
      <td>&nbsp;</td>
      <td>JSONP的方式载入一个远程数据文件,expires控制缓存周期</td>
    </tr>
    <tr>
      <td>magi.remote.get(url,json,callback,expires,errback)</td>
      <td>&nbsp;</td>
      <td>AJAX GET的方式载入一个远程数据文件，expires控制缓存周期</td>
    </tr>
    <tr>
      <td>magi.remote.post(url,json,callback,expires,errback)</td>
      <td>&nbsp;</td>
      <td>AJAX POST的方式载入一个远程数据文件，expires控制缓存周期</td>
    </tr>
    <tr>
      <td>magi.remote.getJson(url,json,callback,expires,errback)</td>
      <td>&nbsp;</td>
      <td>AJAX post的方式载入一个JSON格式的远程文件，expires控制缓存周期</td>
    </tr>
        <tr>
      <td>magi.remote.clear(url,json)</td>
      <td>&nbsp;</td>
      <td>清除指定请求下的缓存</td>
    </tr>
  <tr>
      <td colspan="3" align="center">DEBUG</td>
 </tr>
       <tr>
      <td>magi.debug.start()</td>
      <td>&nbsp;</td>
      <td>执行时间调试起点</td>
    </tr>
     <tr>
      <td>magi.debug.print(string)</td>
      <td>&nbsp;</td>
      <td>执行时间调试输出</td>
    </tr>
    <tr>
      <td>magi.debug.logs(string)</td>
      <td>&nbsp;</td>
      <td>执行时间调试并记录日志，在tools页面查看日记文件</td>
    </tr>
  </table>
  
  
</div>
</body>
</html>
